<template>
  <van-list :offset="10" :immediate-check="false" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="all">
  
    <van-grid :border="false" gutter="11" :column-num="2">
      <template v-for="(item) in list">
        <van-grid-item :key="item.id" class="radius">
          <item :shoper="item" />
        </van-grid-item>
      </template>
    </van-grid>
  </van-list>
</template>

<script>
  import item from './item.vue'
  import {
    ShoperService
  } from '@/api'
  export default {
    name: 'list',
    components: {
      item,
    },
    data() {
      return {
        list: [],
        loading: false,
        finished: false,
        page: 1,
        limit: 10,
      };
    },
    unactivated() {
      this.init()
    },
    
    mounted() {
      this.$EventBus.$on("update_list", () => {
        this.init();
        this.onLoad();
      })
      this.init();
      this.onLoad();

    },
    // watch: {
    //   'this.$store.state.search_id': {
    //     handler(newValue) {
    //       console.log(newValue);
    //       this.init();
    //       this.onLoad();
    //     }
    //   }
    // },
    methods: {
      init() {
        Object.assign(this.$data, this.$options.data())
      },
      onLoad() {
        // 异步更新数据
        this.loading = true;
        // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        ShoperService.getList({
          page: this.page,
          limit: this.limit,
          user_id: this.$store.state.search_id
        }).then(res => {

          this.loading = false;
          if (res.data.data.length < this.limit) {

            this.list = this.list.concat(res.data.data)
            this.finished = true;
          } else {

            this.page++;
            this.list = this.list.concat(res.data.data)
          }


        })

      },


    },
  }
</script>

<style lang="less" scoped>
  /deep/ .van-grid-item__content {
    border-radius: 16px;
  }
</style>